<!-- 加入企业 -->
<template>
  <div class="addEnterprisePage">
    <NavBarHeader class="navBarHeader"></NavBarHeader>
    <div class="container">
      <el-breadcrumb separator="/" class="titleBread">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/personal', query: { navBarIndex: 1 } }"
          >个人中心</el-breadcrumb-item
        >
        <el-breadcrumb-item>加入企业</el-breadcrumb-item>
      </el-breadcrumb>
      <img
        src="./../../../../../public/img/personal/addQiye.png"
        class="realNameImg"
      />
      <div class="inputBox">
        <div class="inputNameBox">
          <span class="inputNameColor">公司名称：</span>
          <el-autocomplete
            class="querySearch"
            v-model="userCompany"
            :fetch-suggestions="querySearch"
            placeholder="请输入公司名称"
            :trigger-on-focus="false"
            @select="handleSelect"
          ></el-autocomplete>
        </div>
        <div class="inputCardBox">
          <span class="inputNameColor">姓名：</span>
          <input
            type="text"
            v-model="userName"
            placeholder="请输入项目"
            class="inputCard1"
          />
        </div>
        <div class="inputCardBox">
          <span class="inputNameColor">加入理由：</span>
          <input
            type="text"
            v-model="userReason"
            placeholder="请输入加入理由"
            class="inputCard"
          />
        </div>
      </div>
      <div class="subMit" @click="goSubMit">
        <span>提交</span>
        <img
          src="./../../../../../public/img/success/rightIcon.png"
          class="rightIcon"
        />
      </div>
    </div>
  </div>
</template>

<script >
import NavBarHeader from "../../../../components/NavBarHeader";
import { setSubmit, getSearch } from "../../../../apis/api";
export default {
  // import引入的组件需要注入到对象中才能使用
  components: { NavBarHeader },
  data() {
    // 这里存放数据
    return {
      userCompany: "",
      userName: "",
      userReason: "",
      listData: [],// 总数据
      groupArr:[],//遍历后的name
      companyId:'',// 遍历后的id
    };
  },
  // 过滤器
  filters: {},
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    userCompany: {
        deep: true,
        handler: function (newVal,oldVal){
          this.groupArr = [];//这是定义好的用于存放下拉提醒框中数据的数组
          var len = this.listData.length;//groupList
          var arr = [];
          for (var i = 0; i < len; i++) {//根据输入框中的值进行模糊匹配
            if (this.listData[i].name.indexOf(this.userCompany) >= 0) {
              arr.push({
                value:this.listData[i].name,
                id:this.listData[i].company_id
              })
            }
          }
          this.groupArr = arr
        }
      }
   },
  // 方法集合
  methods: {
    // 查询企业列表
    async getSearch() {
      let data = {};
      let res = await getSearch(data);
      if (res.data.result == "1") {
        this.listData = res.data.body.coms;
        this.groupArr = []
          for(let item of this.listData) {
            this.groupArr.push({
              value:item.name,
              id:item.id
           })
         }
       }
    },
    // 提交
    async setSubmit() {
      let data = {
        company_id: this.companyId,
        reason: this.userReason,
      };
      let res = await setSubmit(data);
      if (res.data.result == "1") {
        this.$message.success('提交成功')
        setTimeout(()=>{
          this.$router.back(-1);
      },1500)
      }
    },
    goSubMit() {
      this.setSubmit()
    },
    // 输入搜索内容
    querySearch(queryString, cb) {
      var groupArr = this.groupArr;
      cb(groupArr);
    },
    // 输出搜索的i
    handleSelect(item) {
      console.log(item)
      this.companyId = item.id
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getSearch()
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  ctivated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang='scss' scoped>
.navBarHeader {
  background: #1c1e2b;
  z-index: 1000;
}
.addEnterprisePage {
  background-color: #f0f2f5;
}
.container {
  width: 1180px;
  height: 100vh;
  background-color: #fff;
  padding-top: 90px;
  box-sizing: border-box;
  margin: 0 auto;
}
.titleBread {
  margin-left: 30px;
}
.realNameImg {
  width: 116px;
  height: 68px;
  margin-top: 34px;
  margin-left: 30px;
}
.inputBox {
  margin-top: 40px;
  margin-left: 30px;
}
.inputName {
  width: 676px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-left: 45px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.querySearch{
  width: 685px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  margin-left: 35px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.inputCard {
  width: 676px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-left: 45px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.inputCard1 {
  width: 676px;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  margin-left: 73px;
  padding-left: 10px;
  box-sizing: border-box;
  color: #333;
}
.inputCardBox {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.inputNameColor {
  font-size: 14px;
  color: #999;
}
.subMit {
  width: 149px;
  height: 40px;
  background: linear-gradient(136deg, #ffb492 0%, #ff7d59 100%);
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-left: 145px;
  cursor: pointer;
}
.rightIcon {
  margin-left: 10px;
  width: 37px;
  height: 11px;
}
</style>
